<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="video/jquery-1.7.2.min.js" type="text/javascript"></script>

    <title>文档的标题</title>
    <script type="text/javascript">
        $(function() {
            var now = new Date();
            var $video = $("#videoplayer");
            var url = 'files' + '?' + now.getTime();
            $.getJSON(url, function(data) {
                for (var i = 0; i < data.length; i++) {
                    var $li = $('<li>' + data[i].name + '</li>');
                    $li.attr("path", data[i].path);
                    $("#filelist").append($li);
                    $li.click(function() {
                        var p = "/files/" + $(this).attr("path");
                        $video.attr("src", "/files/" + $(this).attr("path"));
                        $video[0].play();
                    });
                }
            });
        });

    </script>
</head>

<body>
<ul id="filelist" style="float:left;"></ul>
<video id="videoplayer" style="width:300px;marginLeft:100px;" controls="controls">
</video>

</body>

</html>